<div ng-controller='statisticstrend' ng-init="init()">
  <style>
    .pieLabel { pointer-events: none }
  </style>
  <!-- START Pie or bar chart -->
  <div ng-show="panel.counter_pos == 'above' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
    <!-- vertical legend above -->
    <table class="small" ng-show="panel.arrangement == 'vertical'">
      <tr ng-repeat="term in legend">
          <td><i class="icon-circle" ng-style="{color:term.color}"></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}% [{{term.extra[0]}}/{{term.extra[1]}}]</td>
      </tr>
    </table>

    <!-- horizontal legend above -->
    <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
     <span><i class="icon-circle" ng-style="{color:term.color}"></i> {{term.label}} ({{term.data[0][1]}}% [{{term.extra[0]}}/{{term.extra[1]}}]) </span>
    </div><br>

  </div>

  <!-- keep legend from over lapping -->
  <div style="clear:both"></div>

  <div ng-show="panel.chart == 'pie' || panel.chart == 'bar'" statisticstrend-chart params="{{panel}}" style="position:relative" class="pointer"></div>

  <div ng-show="panel.counter_pos == 'below' && (panel.chart == 'bar' || panel.chart == 'pie')" id='{{$id}}-legend'>
    <!-- vertical legend below -->
    <table class="small" ng-show="panel.arrangement == 'vertical'">
      <tr ng-repeat="term in legend">
        <td><i class="icon-circle" ng-style="{color:term.color}"></i></i></td> <td style="padding-right:10px;padding-left:10px;">{{term.label}}</td><td>{{term.data[0][1]}}%</td>
      </tr>
    </table>

    <!-- horizontal legend below -->
    <div class="small" ng-show="panel.arrangement == 'horizontal'" ng-repeat="term in legend" style="float:left;padding-left: 10px;">
     <span><i class="icon-circle" ng-style="{color:term.color}"></i></span> {{term.label}} ({{term.data[0][1]}}%) </span>
    </div><br>

  </div>
  <!-- END Pie or Bar chart -->

  <table ng-style="panel.style" class="table table-striped table-condensed" ng-show="panel.chart == 'table'">
    <thead>
        <th>Term</th> <th>{{panel.mode}}</th> <th>Action</th>
    </thead>
    <tr ng-repeat="term in data" ng-show="showMeta(term)">
      <td>{{term.label}}</td>
      <td>{{term.data[0][1]}}%</td>
      <td>
        <span ng-hide="term.meta == 'other'">
          <i class='icon-search pointer' ng-click="build_search(term)"></i>
          <i class='icon-ban-circle pointer' ng-click="build_search(term,true)"></i>
        </span>
      </td>
    </tr>
  </table>

</div>
